<!-- components/Account.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <CustomNavbar title="积分转赠"/> -->
		<view class="content">
			<view class="transfer-num box">
				<text>转赠数量</text>
				<input type="number" placeholder="请输入转赠数量" placeholder-class="placeholder" v-model="formData.score"
					style="text-align: left;" />
			</view>
			<view class="presented box">
				<view class="flex-between">
					<text>受赠人账号</text>
					<input type="text" placeholder="请输入受赠人账号" placeholder-class="placeholder"
						v-model="formData.target_username" />
				</view>
				<view class="line">

				</view>
				<view class="flex-between">
					<text>支付密码</text>
					<input type="password" placeholder="请输入支付密码" placeholder-class="placeholder"
						v-model="formData.pay_password" />
				</view>
			</view>
			<view class="describe">
				<h4>转赠说明：</h4>
				<view>
					<text>
						1.转赠手续费1%
					</text> <br />
					<text>账户余额大于50元的情况下，才能够进行提现。</text>
				</view>
				<view>
					<text>2.请务必正确填写受赠人账号，填写错误从而造成资产损失,平台概不负责</text>
				</view>
				<view>
					<text>3.提现时间<br /></text>
					&nbsp;&nbsp;&nbsp;&nbsp;<text>a)提现申请: 每周二08:00-24:00;</text><br />
					&nbsp;&nbsp;&nbsp;&nbsp;<text>b)审核时间: 周一至周五08:00-17:00,节假日顺延;</text>
				</view>
				<view>
					<text>4.到账时间</text> <br />
					&nbsp;&nbsp;&nbsp;&nbsp;<text>因本平台是基于微信支付平台,到账时间为提现申请审核</text><br />
					&nbsp;&nbsp;&nbsp;&nbsp;<text>通过后,7个工作日</text>
				</view>
			</view>
			<button @click="query">确认提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const formData = reactive({
		score: '',
		target_username: '',
		pay_password: ''
	})
	// 确认
	const query = () => {
		const urlName = ref('scoreTransfer')
		if (navTitle.value == '现金账户') {
			urlName.value = 'cashTransfer'
			formData.money = formData.score
		}
		uni.$api.user[urlName.value](formData).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg
				})
				setTimeout(function() {
					formData.score = '';
					formData.money = '';
					formData.target_username = '';
					formData.pay_password = '';
				}, 1000)

			}
		})
	}
	const navTitle = ref(null)

	onLoad((options) => {
		if (options.title) {
			navTitle.value = options.title
			uni.setNavigationBarTitle({
				title: options.title
			})
		}

	})
</script>

<style lang="scss" scoped>
	.container {

		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 28rpx;
		/* 导航栏高度 */
		.content {
			padding: 20rpx;

			.box {
				border-radius: 10rpx;
				background-color: #fff;

				color: #101624;
				font-size: 28rpx;
				font-weight: bold;

				input {
					font-weight: normal;
					font-size: 28rpx;
					text-align: right;
				}

				.placeholder {
					color: #C5C9D2;

				}

			}

			.transfer-num {
				margin-bottom: 16rpx;
				padding: 39rpx 30rpx 48rpx;

				input {
					margin-top: 39rpx;
				}
			}

			.presented {
				.line {
					width: 100%;
					height: 1px;
					background-color: #EFEFEF;
				}

				.flex-between {
					padding: 42rpx 30rpx;

					input {
						width: 250rpx;
					}
				}
			}

			.describe {
				margin-top: 54rpx;
				font-size: 24rpx;
				color: #898989;

				h4 {
					color: #666666;
					position: relative;
					padding-left: 20rpx;
					font-size: 28rpx;
					margin-bottom: 30rpx;

					&::after {
						content: '';
						display: block;
						position: absolute;
						width: 10rpx;
						height: 26rpx;
						border-radius: 5rpx;
						background-color: #FD3933;
						left: 0;
						top: 8rpx;

					}
				}

				text {
					line-height: 50rpx;
				}

			}

			// 确认按钮
			button {
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
				width: 690rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #fff;
				background: linear-gradient(to right, #FF5A55, #FD3832);
			}
		}
	}
</style>